<template>
  <div class="teacher1">
    <h1>人员管理</h1>
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="输入名称"></el-input>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input v-model="form.mobile" placeholder="输入手机号码"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="form.state" placeholder="请选择状态">
          <el-option label="全部" value></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="del">删除选中</el-button>

    <!-- <el-table :data="listShow" style="width: 100%" @selection-change="selectChange" v-loading="loading"> -->
    <el-table :data="listShow" style="width: 100%" @selection-change="selectChange">
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="nickname" label="学生名称" width="180"></el-table-column>
      <el-table-column prop="mobile" label="电话" width="180"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 1 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间">
        <template slot-scope="scope">
          <span>{{ new Date(scope.row.created_at * 1000).toLocaleString() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toDetial(scope.row.uid)">详情</el-button>
          <el-button type="primary" size="mini" @click="delOne(scope.row.uid)">删除</el-button>
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination background layout="prev, pager, next" :total="list.length" :page-size="pageSize"
                   :current-page="currentPage" @current-change="pageChage"></el-pagination>

    <el-dialog title="提示" :visible.sync="showEdit" width="30%">
      <el-form ref="form" :model="formEdit" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="formEdit.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formEdit.mobile"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formEdit.state" placeholder="请选择状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
				<el-button @click="showEdit = false">取 消</el-button>
				<el-button type="primary" @click="comfirm">确 定</el-button>
			</span>
    </el-dialog>

    <!-- 回到顶部 -->
    <el-backtop target=".el-table"></el-backtop>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      editingId: '',
      showEdit: false, // 编辑弹窗是否展示
      form: {
        name: '',
        mobile: '',
        state: '',
      },
      formEdit: {
        name: '',
        mobile: '',
        state: '',
      },
      list: [], //所有的数据
      listCopy: [], //所有的数据拷贝
      // listShow: [], // 每页要展示的数据
      pageSize: 25,
      currentPage: 1,
      selectedList: [],
    }
  },
  computed: {
    listShow() {
      let arr = [];
      arr = this.list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
      return arr;
    }
  },
  methods: {
    search() { // 搜索
      this.form
      let arr = this.listCopy.filter(item => { // 根据用户的搜索条件过滤数组
        return (
            item.nickname.includes(this.form.name) &&
            item.mobile.includes(this.form.mobile) &&
            (this.form.state === '' ? true : (item.status == this.form.state ? true : false))
        )
      })
      this.list = arr;

      /*
        运算符优先级 有高到底  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
        … === …
        … && …
        … ? … : …
       */
    },
    reset() { // 重置
      console.log('submit!');
    },
    del() { // 删除
      // this.list.forEach((item, index, arr) => {
      //     this.selectedList.forEach((e, i, arr2) => {
      //         if(item.uid === e.uid) {
      //             arr.splice(index, 1)
      //         }
      //     })
      // })

      for (var i = this.list.length - 1; i > 0; i--) {
        this.selectedList.forEach(item => {
          if (this.list[i].uid === item.uid) {
            this.list.splice(i, 1)
          }
        })
      }

    },
    selectChange(val) { // 选中项有变化
      // console.log(val)
      this.selectedList = val;
    },
    pageChage(val) { // 页码改变
      // console.log(val)
      this.currentPage = val;
    },
    toDetial(id) { // 去详情页
      this.$router.push({path: 'detail', query: {id: id}})
    },
    delOne(id) { // 删除单个
      this.list.forEach((item, index, arr) => {
        if (item.uid === id) {
          arr.splice(index, 1)
        }
      });
      this.listCopy.forEach((item, index, arr) => {
        if (item.uid === id) {
          arr.splice(index, 1)
        }
      });
    },
    edit(obj) { // 开始编辑
      console.log(obj)
      this.editingId = obj.uid;
      this.showEdit = true; // 显示弹窗
      // 修改默认值
      this.formEdit.name = obj.nickname
      this.formEdit.mobile = obj.mobile
      this.formEdit.state = obj.status.toString();

    },
    comfirm() { // 确定编辑

      this.list.forEach((item, index, arr) => {
        if (item.uid === this.editingId) { // 这个item就是我们要修改的对象
          item.nickname = this.formEdit.name;
          item.mobile = this.formEdit.mobile;
          item.status = this.formEdit.state;
        }
      })
      this.listCopy.forEach((item, index, arr) => {
        if (item.uid === this.editingId) { // 这个item就是我们要修改的对象
          item.nickname = this.formEdit.name;
          item.mobile = this.formEdit.mobile;
          item.status = this.formEdit.state;
        }
      })

      this.editingId = '';
      this.showEdit = false; // 隐藏弹窗
    }
  },
  mounted() {
    // 开始全局的loading
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    this.$axios({url: '/list.json', method: 'get',}).then(res => {
      // console.log(res)
      this.list = res
      this.listCopy = JSON.parse(JSON.stringify(this.list))
      // this.loading = false; // 取消局部loading动画
      loading.close(); //取消全局的loading动画
    })


    // const loading = this.$loading({
    //     lock: true,
    //     text: 'Loading',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.7)'
    // });
    // setTimeout(() => {
    //     loading.close();
    // }, 2000);


  }
}
</script>

<style lang='scss' scoped>
.teacher1 {
  h1 {
    font-size: 28px;
    font-weight: bold;
    padding-bottom: 20px;
  }

  /deep/ {
    .el-table {
      height: 500px;
      overflow: auto;
    }
  }
}
</style>
